<!--
This example demonstrates how to set left and right editors using ajax.
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" /><title>Mergely - Simple Example</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Merge and Diff your documents with diff online and share" />
	<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
	<meta name="author" content="Jamie Peabody" />

	<!-- Requires jQuery -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

	<!-- Requires CodeMirror -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />

	<!-- Requires Mergely -->
	<script type="text/javascript" src="../lib/mergely.js"></script>
	<link type="text/css" rel="stylesheet" href="../lib/mergely.css" />

	<style type='text/css'>
		.drop_zone {
			border: 2px dashed #BBBBBB;
			border-radius: 5px 5px 5px 5px;
			color: #BBBBBB;
			padding: 10px 25px;
			text-align: center;
			align: center;
			width: 80%;
		}
	</style>
	<script type="text/javascript">

		$(document).ready(function () {
			$('#compare').mergely({
				width: 'auto',
				height: 'auto', // containing div must be given a height
				cmsettings: { readOnly: false },
			});
			var lhs_url = 'lhs.txt';
			var rhs_url = 'rhs.txt'
			$.ajax({
				type: 'GET', async: true, dataType: 'text',
				url: lhs_url,
				success: function (response) {
					$('#path-lhs').text(lhs_url);
					$('#compare').mergely('lhs', response);
				}
			});
			$.ajax({
				type: 'GET', async: true, dataType: 'text',
				url: rhs_url,
				success: function (response) {
					$('#path-rhs').text(rhs_url);
					$('#compare').mergely('rhs', response);
				}
			});

			function checkFileList(files) {
				if (typeof window.FileReader !== 'function')
					error_msg("The file API isn't supported on this browser yet.");

				if (files.length>0) readFile(files[0], "lhs");
				if (files.length>1) readFile(files[1], "rhs");
			}

			$('#compare').on('updated', function () {
				var changes = $('#compare').mergely('summary');
				console.log(changes);
				$('#adds').text(changes.a);
				$('#changes').text(changes.c);
				$('#dels').text(changes.d);
			});

			function readFile(file, side) {
				var reader = new FileReader();
				reader.onload = function file_onload() {
					// document.getElementById('td1').innerHTML = ..
					$('#path-'+side).text(file.name);
					$('#compare').mergely(side, reader.result);
				}
				reader.readAsBinaryString(file);
			}
			function handleDragOver(evt) {
				evt.stopPropagation();
				evt.preventDefault();
				evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
			}
			function handleFileSelect(evt) {
				document.getElementById('drop_zone').visibility = "collapse";
				evt.stopPropagation();
				evt.preventDefault();
				var files = evt.dataTransfer.files; // FileList object.
				checkFileList(files);
			}
			var dropZone = document.getElementById('drop_zone');
			document.body.addEventListener('dragover', handleDragOver, false);
			document.body.addEventListener('drop', handleFileSelect, false);

			function download_content(a, side) {
				//a.innerHTML = "preparing content..";
				var txt = $('#compare').mergely('get', side);
				var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
				a.setAttribute('download', side+".txt");
				a.setAttribute('href', datauri);
				//a.innerHTML = "content ready.";
			}
			document.getElementById('save-lhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
			document.getElementById('save-rhs').addEventListener('mouseover', function() { download_content(this, "rhs"); }, false);
			document.getElementById('ignorews').addEventListener('change', function() {
				$('#compare').mergely('options', { ignorews: this.checked });
			}, false);

		});
	</script>
</head>
<body style="width: 100%; margin: 0;">
	<table  style="width: 100%;"><tr>
		<td style="width: 50%;"><div id="drop_zone" class="drop_zone">Drop files here</div></td>
		<td style="width: 50%;"><input type="checkbox" id="ignorews">ignore witespaces</td>
	</tr></table>
	<br/>

	<table  style="width: 100%;"><tr>
		<td style="width: 50%;"><tt id="path-lhs"></tt> &nbsp; <a id="save-lhs" class="save-link" href="#">save</a></td>
		<td style="width: 50%;"><tt id="path-rhs"></tt> &nbsp; <a id="save-rhs" class="save-link" href="#">save</a></td>
	</tr></table>

	<div style="height: 450px; width: 100%;">
		<div class="mergely-resizer">
			<div id="compare">
			</div>
		</div>
	</div>

	<div id="summary">
		Changes: <span id="adds">0</span> added lines, 
			<span id="dels">0</span> deleted lines, 
			<span id="changes">0</span> changed lines
	</div>
</body>
</html>
